新一代的 JavaScript：ES6 與 babel

2017鐵人賽 babel es6

huli

2016-12-20 00:27:50

12949 瀏覽

分享至

新一代的 JavaScript：ES6 與 babel

時代在進步，程式語言也會跟著一起進步。JavaScript 其實是一個叫做 ECMAScript 標準的實作。而我們把 ECMAScript6 簡稱為 ES6。你就想成是多了很多功能的 JavaScript 就好。在這邊先介紹幾個常用的：

let 跟 const

在 JavaScript 裡面，scope跟其他程式語言不太一樣，是以 function 當作基礎，例如說：

function test() {
  for(var i = 1; i <= 10; i++) {
    console.log(i);
  }
  console.log(i); // 11
}

因為 i 的 scope 是整個函式，所以在迴圈外面的地方也可以存取得到。但有了 ES6 以後，比較推薦的寫法是用let，它的 scope 就會變成一個 block。以上面的例子來說，如果你把 i 改成用 let 宣告的話，會出現錯誤：

function test() {
  for(let i = 1; i <= 10; i++) {
    console.log(i);
  }
  console.log(i); // Uncaught ReferenceError: i is not defined
}

另一個關鍵字 const 的話就是常數的意思，宣告之後就沒有辦法再改變它的職。這個就不多加介紹了

Arrow Function

假設你要寫一個把每一個數字都加一的程式：

let a = [1, 2, 3];
a = a.map(function (item) {
  return item+1;
})
console.log(a); // [2, 3, 4]

arrow function 就是語法糖，你可以簡化成這樣：

let a = [1 ,2, 3];
a = a.map((item) => item+1);
console.log(a);

// 多行
let a = [1 ,2, 3];
a = a.map((item) => {
  return item+1;
});
console.log(a);

除此之外還有一個差別，那就是在 function 裡面的this會指到誰。但是這個有點小複雜，所以有興趣的可以自己去找資料來看。

Spread Operator

這個是我最喜歡的功能，因為用起來實在是太直覺了。我覺得要會用這個的訣竅就是不要想，看就對了！總之這個符號就是「打散」的意思。

var b = [1 ,2 ,3];
var c = [4, 5, ...b];
console.log(c); // [4, 5, 1, 2, 3]

var obj = {
  name: 'huli',
  age: 100,
  height: 666
}
var newObj = {
  ...obj,
  nickname: 'hello',
  age: 30
}
console.log(newObj);
/*
{
  name: 'huli',
  nickname: 'hello',
  age: 30,
  height: 666
}
*/

Destructuring Assignment

這個也是直接看例子最快：

var obj = {
  a: 1,
  b: 2
}
const {a} = obj;
console.log(a); // 1

ES6 的簡單介紹就到這邊差不多啦，主要就是很多語法糖然後讓你可以更方便更直覺的寫 code，現在如果叫我回去寫 ES5 我一定會覺得很痛苦...
想要看更多資源的可參考：

Babel

可是大家都知道，有些看起來很潮很新的東西有一個缺點，那就是瀏覽器不一定可以支援。那怎麼辦呢？
這個時候就是本日主角：Babel出場的時候了，來偷一下官網的 slogan：

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

沒錯，講得非常清楚明白，就是一個 JavaScript 的編譯器，我們可以先在Try it out這邊試玩看看

const test = () => {
  let arr = [];
  for(let i=0; i<1; i++) {
    arr.push(i);
  }
  console.log(i);
  console.log([...arr, 'hello']);
}

'use strict';

var test = function test() {
  var arr = [];
  for (var _i = 0; _i < 1; _i++) {
    arr.push(_i);
  }
  console.log(i);
  console.log([].concat(arr, ['hello']));
};

只要有了 babel 之後，就可以把 ES6 的語法轉成 ES5，可以不用考慮瀏覽器的支援度問題了。而且當全世界都支援 ES6 的時候，你要做的事情也很簡單，就只要把 babel 拿掉就好了。

噢對了，突然發現 babel 官網有一個 Learn ES2015 的單元，如果你想看更多 ES6 的語法也可以來這邊看。

接著就是最後也是最重要的一點：要怎麼用 babel 呢？其實在 codepen 或是其他的線上編輯網站裡面，都會有選項可以讓你選，你勾選 babel 之後就可以直接用最新的語法開始快樂 coding 了。或者是也可以參考官方文件，直接在瀏覽器上面引入 babel 的 script：

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

就是這麼簡單容易！從今天開始改用最新的語法來寫程式吧，寫久了相信你就會跟犀利人妻一樣：可是瑞凡，我回不去了。